<template>
  <!-- 个人主页 -->
  <div style="width: 1000px;margin: 0 auto;">
    <el-container style="overflow: auto;">
      <!--  顶部个人资料卡片  -->
      <el-header style="padding: 0">
        <el-card
            id="top-card"
            style="height: 260px;"
        >
          <v-img
              src="../../../public/imgs/personalPage/head1.png"
              style="float: left;width: 120px;height: 120px;margin-top: 50px;margin-left: 50px"
          >
          </v-img>
          <div style="float: left;margin-top: 100px;margin-left: 30px">
            <span>
              {{ user.nickname }}
            </span>
          </div>
          <div style="float: left;margin-top: 190px;margin-left: -180px">
            <el-row :gutter="10">
             <el-col :span="3">
               <el-icon style="font-size: 24px"><Postcard /></el-icon>
             </el-col>
             <el-col :span="21">
               <span style="margin-left: 10px;">
              {{ user.signature }}
            </span>
             </el-col>
            </el-row>
          </div>
          <el-row>
            <el-col :offset="16" :span="6">
              <v-btn rounded="xl"
                     block
                     style="margin-top: 180px">
                编辑个人资料
              </v-btn>
            </el-col>
          </el-row>
        </el-card>
      </el-header>
      <!--   主要内容   -->
      <el-container style="margin-top: 210px;">
        <!--    页面主题左侧    -->
        <el-aside style="width: 690px;margin-right: 10px;background-color: #FFf;">
          <!--     主体菜单     -->
          <el-menu :default-active="activeIndex"
                   mode="horizontal"
                   class="el-menu-demo"
                   router
                   style="height: 45px;"
                   @select="handleSelect">
            <el-menu-item index="/article">文章</el-menu-item>
            <el-menu-item index="/replied">回答</el-menu-item>
            <el-menu-item index="/question">问题</el-menu-item>
            <el-menu-item index="/likeArticle">点赞</el-menu-item>
            <el-menu-item index="/favorites">收藏</el-menu-item>
            <el-menu-item index="/draft">草稿</el-menu-item>
          </el-menu>
          <div style="width: 100%;">
            <router-view/>
          </div>
        </el-aside>
        <!--    页面主体右侧    -->
        <el-container  style="width: 300px;">
          <div>
            <!--      主体右侧的上方      -->
            <el-main style="padding: 0;">
              <el-card>
                <el-table :data="attentionUserArr"
                          stripe
                          style="width: 100%;height:250px;overflow: auto;"
                >
                  <el-table-column prop="nickname" width="150px"></el-table-column>
                  <el-table-column>
                    <template #default="scope">
                      <el-button @click="followsStatus(scope.row.followsUserId,scope.row.nickname)">
                        已关注
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </el-main>
            <!--      主体右侧的下方      -->
            <el-main style="padding: 0;">
              <el-card>
                <template #footer>快来发布属于自己的文章和问题吧！</template>
                <v-img src="../../../public/imgs/personalPage/fengye.jpg"></v-img>
                <el-row style="margin-top: 10px;">
                  <el-col :offset="3" :span="6">
                    <el-button type="warning" text bg style="padding-right: 10px;">
                      发问题
                      <el-icon size="20px" style="margin-bottom: 10px;margin-left: 5px;">
                        <ChatDotRound />
                      </el-icon>
                    </el-button>
                  </el-col>
                  <el-col :offset="3" :span="6">
                    <el-button type="warning" text bg style="padding-left: 10px;">
                      <el-icon size="20px" style="margin-right: 5px;">
                        <EditPen />
                      </el-icon>
                      写文章
                    </el-button>
                  </el-col>
                </el-row>
              </el-card>
            </el-main>
          </div>
        </el-container>
      </el-container>
    </el-container>


  </div>


</template>

<script setup>
import {onMounted, ref} from "vue";
import {ChatLineSquare, Pointer, Star, View} from "@element-plus/icons-vue";
import index from "vuex";
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";
import router from "@/router";

//定义变量，保存登录用户的信息
const user = ref(getUser());
// console.log(user.value.nickname)
//定义变量，保存关注用户数组
const attentionUserArr = ref([]);

//定义变量，维护菜单显示
const activeIndex = ref('/article');
//切换菜单
const handleSelect = (index)=>{
  activeIndex.value = index;
}

//获取关注的用户信息
const loadPersonal = ()=>{
  let data = user.value.id
  axios.get(BASE_URL+'/v1/personal/selectUserFollows?id='+data).then((response)=>{
    if (response.data.code==2000){
      attentionUserArr.value=response.data.data;
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}

//进入页面就加载的数据
onMounted(()=>{
  loadPersonal();
  router.push('/article');
})

//更改关注的用户的关注状态
const followsStatus = (followsUserId,nickname)=>{
  console.log(followsUserId)
  console.log(nickname)
  if (confirm('确定取消关注'+nickname+'吗？')){
    axios.post(BASE_URL+'/v1/personal/unfollows/'+followsUserId).then((response)=>{
      if (response.data.code == 2000){
        loadPersonal();
        ElMessage.success('已取消关注！');
      }else {
        ElMessage.error(response.data.msg);
      }
    })
  }
}
</script>

<style scoped>
  #top-card{
    background-image: url("../../../public/imgs/personalPage/fengye.jpg");
  }
</style>